<template>
  <div>
    <!-- <h1>nan</h1> -->
    <div class="girlsRec">
      <!-- 轮播图 -->
      <div class="banner">
        <div class="bannerImg">
          <van-swipe :autoplay="3000" indicator-color="white">
            <van-swipe-item v-for="item in imgs" :key="item.id">
              <img :src="item.img" />
            </van-swipe-item>
          </van-swipe>
        </div>
      </div>

      <!-- 热门小说 -->
      <div class="girlsHot">
        <div class="title">
          <div class="ghot">热门小说</div>

          <div class="gfont">
            换一换 <span class="iconfont icon-huanyihuan1"></span>
          </div>
        </div>

        <div class="gHotCon">
          <ul>
            <li v-for="item in hot" :key="item.id" @click="$router.push({name:'synopsis',query:{id:item.id}})">
              <div class="img">
                <img :src="item.img" />
              </div>
              <p>{{ item.title }}</p>
              <span>{{ item.writer }}</span>
            </li>
          </ul>
        </div>
      </div>

      <!-- 排行榜 -->
      <div class="girlsRank">
        <div class="title">
          <div class="hot">排行榜</div>
        </div>

        <div class="girlsCard">
          <van-tabs type="card">
            <van-tab title="总裁榜">
              <ul>
                <li v-for="(item, index) in president" :key="item.id" @click="$router.push({name:'synopsis',query:{id:item.id}})">
                  <div class="rankImg">
                    <img :src="item.img" />
                  </div>

                  <div class="rankText">
                    <div class="rankNum">{{ index + 1 }}</div>

                    <div class="rankFont">
                      <p>{{ item.title }}</p>
                      <span>{{ item.writer }}</span>
                    </div>
                  </div>
                </li>
              </ul>
            </van-tab>

            <van-tab title="年代榜">
              <ul>
                <li v-for="(item, index) in decade" :key="item.id" @click="$router.push({name:'synopsis',query:{id:item.id}})">
                  <div class="rankImg">
                    <img :src="item.img" />
                  </div>

                  <div class="rankText">
                    <div class="rankNum">{{ index + 1 }}</div>

                    <div class="rankFont">
                      <p>{{ item.title }}</p>
                      <span>{{ item.writer }}</span>
                    </div>
                  </div>
                </li>
              </ul>
            </van-tab>

            <van-tab title="奇幻榜">
              <ul>
                <li v-for="(item, index) in fantasy" :key="item.id" @click="$router.push({name:'synopsis',query:{id:item.id}})">
                  <div class="rankImg">
                    <img :src="item.img" />
                  </div>

                  <div class="rankText">
                    <div class="rankNum">{{ index + 1 }}</div>

                    <div class="rankFont">
                      <p>{{ item.title }}</p>
                      <span>{{ item.writer }}</span>
                    </div>
                  </div>
                </li>
              </ul>
            </van-tab>

            <van-tab title="种田榜">
              <ul>
                <li v-for="(item, index) in farm" :key="item.id" @click="$router.push({name:'synopsis',query:{id:item.id}})">
                  <div class="rankImg">
                    <img :src="item.img" />
                  </div>

                  <div class="rankText">
                    <div class="rankNum">{{ index + 1 }}</div>

                    <div class="rankFont">
                      <p>{{ item.title }}</p>
                      <span>{{ item.writer }}</span>
                    </div>
                  </div>
                </li>
              </ul>
            </van-tab>
          </van-tabs>
        </div>
      </div>

      <!-- 猜你喜欢 -->
      <div class="girlsLike">
        <div class="title">
          <div class="hot">猜你喜欢</div>
        </div>

        <div class="glikedCon">
          <ul>
            <li v-for="item in like" :key="item.id" @click="$router.push({name:'synopsis',query:{id:item.id}})">
              <div class="likedImg">
                <img :src="item.img" />
              </div>

              <div class="content">
                <div class="lhead">
                  <p>
                    {{ item.title }}
                  </p>
                  <span>
                    <i> {{ item.scoring }}</i
                    >分</span
                  >
                </div>
                <div class="lcon">
                  {{ item.synopsis }}
                </div>
                <div class="lbtm">
                  猜你喜欢・{{ item.number }}・{{ item.end }}
                </div>
              </div>
            </li>
          </ul>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { getBanner, getRecommendRank } from "../../../api/index";
export default {
  data() {
    return {
      imgs: null,
      hot: null, // 热门
      like: null, // 猜你喜欢
      president: null, // 总裁榜
      decade: null, // 年代榜
      fantasy: null, // 奇幻
      farm: null, // 种田榜
    };
  },
  created() {
    getBanner().then((data) => {
      this.imgs = data.data.banner.girls;
      console.log(data);
      console.log(this.imgs);
    });
    getRecommendRank().then((data) => {
      console.log(data);
      this.hot = data.recommendRank.girlsLike;
      this.like = data.recommendRank.girlsLike;
      this.president = data.recommendRank.girls.popularity;
      this.decade = data.recommendRank.girls.finished;
      this.fantasy = data.recommendRank.girls.popularity;
      this.farm = data.recommendRank.girls.finished;
    });
  },
};
</script>

<style lang="less">
.girlsRec {
  padding-bottom: 50px;
  .banner {
    padding: 5px 15px;
    .bannerImg {
      width: 100%;
      height: 122px;
      border-radius: 5px;
      img {
        width: 100%;
        height: 122px;
        border-radius: 5px;
      }
    }
  }
  .girlsHot {
    width: 100%;
    background-color: #fff;
    margin: 10px 0;
    .title {
      display: flex;
      justify-content: space-between;
      padding: 10px 15px;
      .ghot {
        font-size: 18px;
        font-weight: bold;
        position: relative;
        margin-left: 5px;
        &::before {
          content: "";
          display: block;
          position: absolute;
          left: -10px;
          top: 0px;
          width: 3px;
          height: 100%;
          background-color: #d44439;
        }
      }
      .gfont {
        font-size: 14px;
        .iconfont {
          font-size: 18px;
        }
      }
    }
    .gHotCon {
      ul {
        padding: 5px 15px;
        display: flex;
        justify-content: space-between;
        flex-wrap: wrap;
        li {
          width: 23%;
          margin-bottom: 10px;
          .img {
            width: 80px;
            height: 100px;
            border-radius: 4px;
            img {
              width: 80px;
              height: 100px;
              border-radius: 4px;
            }
          }
          p {
            width: 100%;
            font-size: 13px;
            font-weight: 600;
            color: #333;
            line-height: 18px;
            margin-bottom: 5px;
            // 1、固定宽度（高度可有可无）：width: 195px;
            // 2、把盒子转成弹性伸缩盒子：
            display: -webkit-box;
            // 3、弹性盒子排列方式：垂直排列：
            -webkit-box-orient: vertical;
            // 4、规定显示几行文本：
            -webkit-line-clamp: 2;
            // 5、溢出隐藏：
            overflow: hidden;
          }
          span {
            width: 100%;
            display: block;
            color: #aaa;
            font-size: 12px;
            // 2、让文本不会自动换行 ：
            white-space: nowrap;
            // 3、让文本溢出隐藏：
            overflow: hidden;
            // 4、文本溢出时显示省略号：
            text-overflow: ellipsis;
          }
        }
      }
    }
  }

  .girlsRank {
    width: 100%;
    background-color: #fff;
    margin: 10px 0;
    .title {
      display: flex;
      justify-content: space-between;
      padding: 10px 15px;
      .hot {
        font-size: 18px;
        font-weight: bold;
        position: relative;
        margin-left: 5px;
        &::before {
          content: "";
          display: block;
          position: absolute;
          left: -10px;
          top: 0px;
          width: 3px;
          height: 100%;
          background-color: #d44439;
        }
      }
    }

    .girlsCard {
      width: 100%;
      ul {
        padding: 15px 15px;
        display: flex;
        justify-content: space-between;
        flex-wrap: wrap;
        li {
          width: 46%;
          margin-bottom: 10px;
          display: flex;
          justify-content: space-between;
          .rankImg {
            width: 60px;
            height: 80px;
            border-radius: 4px;
            img {
              width: 60px;
              height: 80px;
              border-radius: 4px;
            }
          }
          .rankText {
            display: flex;
            justify-content: space-between;
            flex: 1;
            .rankNum {
              padding: 0 8px;
              font-size: 16px;
              // font-weight: 600;
            }
            .rankFont {
              flex: 1;
              p {
                font-size: 14px;
                line-height: 20px;
                font-weight: 600;
                margin-bottom: 5px;
                // 1、固定宽度（高度可有可无）：width: 195px;
                // 2、把盒子转成弹性伸缩盒子：
                display: -webkit-box;
                // 3、弹性盒子排列方式：垂直排列：
                -webkit-box-orient: vertical;
                // 4、规定显示几行文本：
                -webkit-line-clamp: 2;
                // 5、溢出隐藏：
                overflow: hidden;
              }
              span {
                color: #aaa;
                font-size: 12px;
              }
            }
          }
        }
      }
    }
  }
  .girlsLike {
    width: 100%;
    background-color: #fff;
    margin: 10px 0;
    .title {
      display: flex;
      justify-content: space-between;
      padding: 10px 15px;
      .hot {
        font-size: 18px;
        font-weight: bold;
        position: relative;
        margin-left: 5px;
        &::before {
          content: "";
          display: block;
          position: absolute;
          left: -10px;
          top: 0px;
          width: 3px;
          height: 100%;
          background-color: #d44439;
        }
      }
    }
    .glikedCon {
      width: 100%;
      ul {
        padding: 10px 15px;
        li {
          width: 100%;
          display: flex;
          padding-bottom: 15px;
          .likedImg {
            padding-right: 10px;
            width: 80px;
            height: 100px;
            border-radius: 4px;
            img {
              width: 80px;
              height: 100px;
              border-radius: 4px;
            }
          }
          .content {
            width: 100%;
            .lhead {
              width: 100%;
              display: flex;
              justify-content: space-between;
              p {
                flex: 1;
                font-size: 16px;
                font-weight: 600;
                // 1、固定宽度（高度可有可无）：width: 195px;
                display: -webkit-box;
                -webkit-box-orient: vertical;
                -webkit-line-clamp: 1;
                overflow: hidden;
              }
              span {
                color: #ff7200;
                font-size: 12px;
                i {
                  font-size: 16px;
                }
              }
            }
            .lcon {
              color: #aaa;
              line-height: 24px;
              margin: 14px 0 10px 0;
              display: -webkit-box;
              -webkit-box-orient: vertical;
              -webkit-line-clamp: 2;
              overflow: hidden;
            }
            .lbtm {
              color: #aaa;
              font-size: 12px;
            }
          }
        }
      }
    }
  }
}
</style>